<template>
  <div class="menu-header">
    <ArrowLeftBold
      @click="handleBack"
      width="24"
      height="24"
      style="padding-top: 4px; cursor: pointer"
      title="返回"
    />
    <p class="menu-title">{{ trialForm.name }}</p>
  </div>
</template>
<script setup>
import { getDetail } from '@/api/trial/trial';
import { useRoute, useRouter } from 'vue-router';
import { ref, reactive, computed, onMounted } from 'vue';
const route = useRoute();
const router = useRouter();
const routerQuery = ref({});
routerQuery.value = route.query;
const trialForm = ref({});
const initTrialDetail = async id => {
  let res = await getDetail(id);
  trialForm.value = res.data.data;
};
// 返回
const handleBack = () => {
  router.push({
    path: '/trial/menu',
    query: {
      ...routerQuery.value,
    },
  });
};
onMounted(() => {
  initTrialDetail(routerQuery.value.trialId);
});
</script>
<style scoped>
.menu-header {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.menu-title {
  font-size: 28px;
  margin-top: 0;
  margin-bottom: 0;
}
</style>